.BoardTemplateSelectorItem {
    cursor: pointer;
    transition: all 100ms ease-out 0s;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    margin-bottom: 4px;
    border-radius: var(--default-rad);
    color: rgba(var(--center-channel-color-rgb), 0.64);
    height: 40px;

    .template-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    .template-icon {
        margin-right: 10px;

        i {
            font-size: 16px;
        }
    }

    &:hover {
        background-color: rgba(var(--center-channel-color-rgb), 0.08);
        color: rgba(var(--center-channel-color-rgb), 1);

        .actions {
            display: flex;
        }
    }

    &.active {
        background-color: rgba(var(--button-bg-rgb), 0.08);
        color: rgba(var(--button-bg-rgb), 1);
    }

    .actions {
        position: relative;
        display: none;
        right: -8px;
    }
}

